<template>
  <div>
    <serch></serch>
    <ngt></ngt>
    <!--个人中心外部的部分-->
    <div class="yp_wrapper_onecenter">
      <!--个人中心居中包裹的部分-->
      <div class="yp_onecenter_big">
        <!--个人中心左边的导航栏-->
        <ul class="yp_onecenter_ul">
          <li>
            <h2>个人中心</h2></li>
          <li>
            <h3>交易管理</h3></li>
          <li class="wdzh">
            <a href="#/oneCenter">我的账户</a>
          </li>
          <li>
            <a href="#/centerinfo">我的订单</a>
          </li>
          <li>
            <a href="#/myIntegral">我的积分</a>
          </li>
          <li>
            <a href="#/integration">积分订单</a>
          </li>
          <li>
            <a href="#/myMoney">我的钱包</a>
          </li>
          <li>
            <a href="#/refillCard">充值卡兑换</a>
          </li>
          <li>
            <h3>会员资料</h3></li>
          <li>
            <a href="#/personalData">个人资料</a>
          </li>
          <li>
            <a href="#/addressAdmin">地址管理</a>
          </li>
          <li>
            <a href="#/myCollect">我的收藏</a>
          </li>
          <li>
            <a href="#/glanceOver">最近浏览</a>
          </li>
          <li>
            <a href="#/changePassword">修改密码</a>
          </li>
          <li>
            <h3>站内信</h3></li>
          <li>
            <a href="#/myNews">我的消息</a>
          </li>
          <li>
            <!--<a href="#/feedBack">意见反馈</a>-->
            <a href="#/mysp">意见反馈</a>
          </li>
        </ul>
        <router-view></router-view>
      </div>

    </div>

    <ft></ft>
  </div>
</template>

<script>
  import Serch from './serch'
  import Ngt from './navigation'
  import Ft from '@/components/foot'
  import MyAccount from '@/components/myAccount'
  import MyMoney from '@/components/myMoney'
  import MyIntegral from '@/components/myIntegral'
  import Centerinfo from '@/components/centerinfo'
  import RefillCard from '@/components/refillCard'
  import PersonalData from '@/components/personalData'
  import AddressAdmin from '@/components/addressAdmin'
  import MyCollect from '@/components/myCollect'
  import GlanceOver from '@/components/glanceOver'
  import ChangePassword from '@/components/changePassword'
  import MyNews from '@/components/myNews'
import FeedBack from '@/components/feedBack'
  import Integration from '@/components/integration'


  export default {
    name: "oneCenter",
    data() {
      return {
        str: "nihao"
      }
    },
    components: {
      Ngt,
      Serch,
      Ft,
      MyAccount,
      MyMoney,
      MyIntegral,
      Centerinfo,
      RefillCard,
      PersonalData,
      AddressAdmin,
      MyCollect,
      GlanceOver,
      ChangePassword,
      MyNews,
      FeedBack,
      Integration,
    },
    mounted(){
    	$(function () {
    $('.yp_onecenter_ul>li').click(function () {
      $('.yp_onecenter_ul>li').removeClass('wdzh')
      $(this).addClass('wdzh')
    })
  })
    }
  }
  
</script>
<style scoped>
  body,
  html,
  ul,
  li,
  div,
  h2,
  h3,
  a,
  p, span {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
  }

  body,
  html {
    width: 100%;
  }

  .wdzh > a {
    color: #4B943D !important;
    text-decoration: underline;
  }

  .yp_onecenter_ul li a:hover {
    color: #4B943D !important;
    text-decoration: underline;
  }

  .yp_onecenter_big {
    width: 1280px;
    margin: 0 auto;
    overflow: hidden;
  }

  .yp_wrapper_onecenter {
    margin-top: 10px;
  }

  .yp_onecenter_ul {
    float: left;
    width: 170px;
    border: 1px solid lightgray;
  }

  .yp_onecenter_ul li:nth-child(1) {
    height: 51px;
    line-height: 51px;
  }

  .yp_onecenter_ul li {
    font-size: 16px;
    text-align: left;
    height: 29px;
    line-height: 29px;
    padding: 5px 20px;
  }

  .yp_onecenter_ul li a {
    color: #666;
    font-weight: 500;
  }

  .yp_onecenter_ul li:nth-child(1) {
    border-bottom: 1px solid lightgray;
  }
</style>
